<template>
  <a-modal
    class="tk-modal"
    :visible="visible"
    title="调课详情"
    :width="900"
    :bodyStyle="{
      height: '500px',
      overflow: 'auto'
    }"
    :okText="isCheck ? '提交审核' : '关闭'"
    @cancel="() => { $emit('cancel') }"
    @ok="confirm"
  >
    <detail-list :col="4">
      <detail-list-item term="所属院系">{{ detail.kkyxm | filterYx(yxList) }}</detail-list-item>
      <detail-list-item term="任课老师">{{ detail.dsbhxm }}</detail-list-item>
      <detail-list-item term="课程编号">{{ detail.kcbm }}</detail-list-item>
      <detail-list-item term="课程名称">{{ detail.kcmc }}</detail-list-item>
    </detail-list>
    <p class="title">原定上课时间：</p>
    <p style="color: rgba(0, 0, 0, 0.85)">
      第{{ detail.yksz }}周至{{ detail.yjsz }}周，{{ detail.yskzmc }} ，第{{ detail.ykskj }}至{{ detail.yjskj }}节，上课地点：{{ detail.yrkjs }} 
    </p>
    <a-divider />
    <p class="title">调课时间：</p>
    <p style="color: rgba(0, 0, 0, 0.85)">
      第{{ detail.tzhksz }}周至{{ detail.tzhjsz }}周，{{ detail.tzhskzmc }} ，第{{ detail.tzhkskj }}至{{ detail.tzhjskj }}节，上课地点：{{ detail.tzhjs }} 
    </p>
    <a-divider />
    <p style="color: rgba(0, 0, 0, 0.85)">调课原因：{{ detail.tkyy }}</p>
    <p style="color: rgba(0, 0, 0, 0.85)">申请人：{{ detail.sqr }}</p>
    <p style="color: rgba(0, 0, 0, 0.85)">审核时间：{{ detail.shsj && detail.shsj.format('YYYY-MM-DD') }}</p>
    <p style="color: rgba(0, 0, 0, 0.85)">审核状态：{{ detail.shzt | filterCode(TYPE0518) }}</p>
    <p style="color: rgba(0, 0, 0, 0.85)">审核人：{{ detail.shr }}</p>
    <p style="color: rgba(0, 0, 0, 0.85)">院长审核意见：{{ detail.yzshyj }}</p>
    <p style="color: rgba(0, 0, 0, 0.85)">院系审核意见：{{ detail.yxshyj }}</p>
    <p style="color: rgba(0, 0, 0, 0.85)">培养办审核意见：{{ detail.pybshyj }}</p>
    <a-form v-if="isCheck" :form="form" style="margin-top: 30px">
      <a-row>
        <a-col :md="8" :sm="24">
          <a-form-item
            label="审核结果"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['shzt',
              {
                rules: [{ required: true, message: '请选择审核结果!' }],
              }]">
              <a-select-option v-for="i in checkCode" :key="i.code" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="16" :sm="24">
          <a-form-item
            label="审核意见"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-input type="textarea" v-decorator="['shyj',
              {
                rules: [{ required: false, message: '请选择审核意见!' }],
              }]" :autosize="{ minRows: 4, maxRows: 6 }"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template slot="footer">
        <a-button type="primary" @click="exportDetail">打印</a-button>
        <a-button v-if="!isCheck" type="primary" @click="() => { $emit('cancel') }">关闭</a-button>
        <a-button v-else type="primary" @click="confirm">提交审核</a-button>
        <a-button v-if="isCheck" @click="() => { $emit('cancel') }">取消</a-button>
    </template>
  </a-modal>
</template>

<script>

import { STable } from '~'
import DetailList from '~/tool/DetailList'
import { mapState } from 'vuex'
const DetailListItem = DetailList.Item

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isCheck: {
      type: Boolean,
      default: false
    },
    yxList: {
      type: Array,
      default: []
    },
  },
  // props: ['visible'],
  components: {DetailList, DetailListItem, STable},
  data () {
    return {
      form: this.$form.createForm(this),
      detail: {},
    }
  },
  filters: {
    filterCode(value, type) {
      let name = null
      type && type.map(item => {
        if(item.code === value) return name = item.name
      })
      return name
    },
    filterYx(value, yxList) {
      let name = null
      yxList.map(item => {
        if(item.dwh === value) return name = item.dwmc
      })
      return name
    }
  },
  // tkDetail
  computed: {
    ...mapState({
      TYPE0518: state => state.app['TYPE0518'],
    }),
    routeName () {
      return this.$route.name
    },
    checkCode() {
      if (this.$route.name.includes('院系')) {
        return [{
          code: '03',
          name: '通过'
        },{
          code: '04',
          name: '不通过'
        }]
      } else if (this.$route.name.includes('院长')) {
        return [{
          code: '05',
          name: '通过'
        },{
          code: '06',
          name: '不通过'
        }]
      } else if (this.$route.name.includes('培养办')) {
        return [{
          code: '07',
          name: '通过'
        },{
          code: '08',
          name: '不通过'
        }]
      }
    }
  },
  methods: {
    confirm () {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        if (this.$route.name.includes('院系')) {
          var params = {
            yxshyj : values.shyj
          }
        } else if (this.$route.name.includes('院长')) {
          var params = {
            yzshyj : values.shyj
          }
        } else if (this.$route.name.includes('培养办')) {
          var params = {
            pybshyj : values.shyj
          }
        }

        this.$api.cultivate.tkCheck({...values, id: this.detail.id,...params}).then(res => {
          this.$message.success(res.msg)
          this.$emit('cancel')
          this.$emit('refresh')
        })
      })
    },
    exportDetail(){
      this.$export(`/foster/tksq/export/${this.detail.id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.tk-modal{
  .ant-modal-body{
    padding-top: 0;
    padding-bottom: 0;
  }
  .title{
    font-weight: bold;
  }
}
</style>>
